<template>
    <div id="header_nav">
<!--        pc端导航-->
        <div class="pc_nav">
            <el-menu :default-active="activeIndex" mode="horizontal" router>
            <el-menu-item index="/index">首页</el-menu-item>
            <el-submenu index="2">
                <template slot="title">项目演示</template>
                <el-menu-item><a href="http://www.zydz.icu:81">蘑菇街(webApp)</a></el-menu-item>
                <el-menu-item><a href="http://www.zydz.icu:82">网易云音乐(h5端)</a></el-menu-item>
                <el-menu-item><a @click="downloadM">网易云音乐(手机APP)</a></el-menu-item>
                <el-menu-item><a href="http://www.zydz.icu:83">电商后台管理系统</a></el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">文章笔记</template>
                <el-menu-item index="/hcj">html-css-js</el-menu-item>
                <el-menu-item index="/vueNote">vue</el-menu-item>
                <el-menu-item index="/node">node</el-menu-item>
            </el-submenu>
            <el-menu-item index="/leaveMess">留言板</el-menu-item>
            <el-menu-item index="/article">发表文章</el-menu-item>
            <el-menu-item class="avatar">
                <img :src="userImg"/>
                <el-dropdown @command="goLogin" v-if="getSessionLen === 0">
                    <i class="el-icon-caret-bottom"></i>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item command="a">登录/注册</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
<!--                登录后显示个人信息-->
                <el-dropdown v-else @command="userOP">
                    <i class="el-icon-caret-bottom"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">账户:&nbsp;{{$store.state.userInfo[0].result[0].userName}}</el-dropdown-item>
                        <el-dropdown-item command="b">个人设置</el-dropdown-item>
                        <el-dropdown-item command="c">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-menu-item>
        </el-menu>

        </div>
<!--        移动端导航-->
        <div class="phone_nav">
            <el-menu :default-active="activeIndex" mode="horizontal" router>
                <el-menu-item>
                    <el-dropdown @command="goHome">
                        <i class="el-icon-s-fold"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">首页</el-dropdown-item>
                            <el-dropdown-item command="b">留言板</el-dropdown-item>
                            <el-dropdown-item command="c">发表文章</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">项目演示</template>
                    <el-menu-item><a href="http://www.zydz.icu:81">蘑菇街(webApp)</a></el-menu-item>
                    <el-menu-item><a href="http://www.zydz.icu:82">网易云音乐(h5端)</a></el-menu-item>
                    <el-menu-item><a @click="downloadM">网易云音乐(手机APP)</a></el-menu-item>
                    <el-menu-item><a href="http://www.zydz.icu:83">电商后台管理系统</a></el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">文章笔记</template>
                    <el-menu-item index="/hcj">html-css-js</el-menu-item>
                    <el-menu-item index="/vueNote">vue</el-menu-item>
                    <el-menu-item index="/node">node</el-menu-item>
                </el-submenu>
                <el-menu-item class="avatar">
                    <img :src="userImg"/>
                    <el-dropdown @command="goLogin" v-if="getSessionLen === 0">
                        <i class="el-icon-caret-bottom"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">登录/注册</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!--                登录后显示个人信息-->
                    <el-dropdown v-else @command="userOP">
                        <i class="el-icon-caret-bottom"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>账户:&nbsp;{{$store.state.userInfo[0].result[0].userName}}</el-dropdown-item>
                            <el-dropdown-item command="b">个人设置</el-dropdown-item>
                            <el-dropdown-item command="c">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
            </el-menu>

        </div>
<!--        修改个人信息-->
        <edit-user-dia :message="editUserDiaVis"/>
    </div>
</template>

<script>
    import EditUserDia from "./EditUserDia";
    import {logout} from "../../../network/user";
    export default {
        name: "HeaderNav",
        components:{
            EditUserDia
        },
        data(){
           return {
               activeIndex:'1',
               baseURL:'http://www.zydz.icu:3000',
               editUserDiaVis:false,
               userImg:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
           }
        },
        methods:{
            goHome(index){
                switch (index) {
                    case 'a': this.$router.push('/index');
                    break;
                    case 'b': this.$router.push('/leaveMess');
                    break;
                    case 'c': this.$router.push('article');
                    break;
                }
            },
            goLogin(command){
                if (command === 'a'){
                    this.$router.push('/login');
                }
            },
            //登陆之后用户操作
            userOP(index){
                if (index === 'b'){
                    this.editUserDiaVis = !this.editUserDiaVis
                }else if (index === 'c'){
                    //退出
                    this.$store.state.userInfo = [];
                    logout().then(res => {
                        this.$message.success(res.data.meta.msg);
                        sessionStorage.clear();
                    })
                }
            },
            getImgUrl(){
               if (this.$store.state.userInfo.length === 0){
                   this.userImg = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
               }else {
                   if (this.$store.state.userInfo[0].result[0].userImg === null){
                       this.userImg = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                   }else {
                       this.userImg = this.baseURL + this.$store.state.userInfo[0].result[0].userImg;
                   }

               }
            },
            downloadM(){
                window.open('http://www.zydz.icu:3000/api/zyblog/download/apk')
            }
        },
        computed:{
            getSessionLen(){
                return this.$store.state.userInfo.length
            },
        },
        created() {
            this.getImgUrl();
            this.$bus.$on('editDia',() => {this.editUserDiaVis = !this.editUserDiaVis});
            this.$bus.$on('getUrl',(value) => {
                this.userImg = this.baseURL + value
            });
        },
    }
</script>

<style scoped lang="less">
    #header_nav{
        width: 100%;
    }
    .pc_nav{
        display: none;
    }
    .avatar{
        img{
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }
    }
    .el-menu{
        width: 100%;
    }
    .phone_nav{
        .el-menu-item{
            padding: 0 10px;
        }
        .el-menu{
            display: flex;
            justify-content: center;
        }
        i{
            display: flex;
            align-items: center;
            height: 60px;
            font-size: 2rem;
            color: #8c939d;
        }
    }
    a{
        text-decoration: none;
        color: #333333;
    }
    @media screen and (min-width: 1200px) {
        .pc_nav{
            display: block;
            .avatar{
                margin-left: 43rem;
            }
        }
        .phone_nav{
            display: none;
        }
    }
</style>

